<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>积分商城</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css" />
		<link rel="stylesheet" href="style/plugin/mui/css/mui.min.css" />
		<link rel="stylesheet" href="style/css/product_list.css" />
		<script type="text/javascript" src="style/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="style/js/vue.min.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>
		<script type="text/javascript" src="style/plugin/mui/js/mui.min.js"></script>
	</head>
	<style>
		.my_bar {
			background: #56CCF2;
			background: -webkit-linear-gradient(to left, #2F80ED, #56CCF2);
			background: linear-gradient(to left, #2F80ED, #56CCF2);
		}
		
		.my_bar h1 {
			color: #fff;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav my_bar">
			<h1 class="mui-title">积分商城</h1>
		</header>
		<div id="classify" class="body">
		</div>
	</body>
	<script>
		var classfy = document.getElementById("classify")
		mui.ajax('https://easy-mock.com/mock/5b4edfed7a6a8d141aa075a2/example/mock', {
			data: {},
			dataType: 'json',
			type: 'get',
			timeout: 10000,
			headers: {
				'Content-Type': 'application/json'
			},
			beforeSend:function(){
				mui.toast('正在加载中...')
			},
			success: function(res) {
				console.log(res)
				
				var lists = res.data.projects
				var html = ''
				for(list of lists) {
					html += `
							<div class="list">
								<ul>
									<li>
										<a href="product_details.html">
											<div class="list_left_img">
												<img src="${list.img}">
											</div>
											<div class="list_right_text">
												<span>${list.name}</span>
												<span>礼品数量：${list.number}</span>
												<span class="text_color">积分：${list.price}</span>
											</div>
										</a>
				
									</li>			
								</ul>
							</div>
						`
				}
				classfy.innerHTML = html
			},
			error: function(xhr, type, errorThrown) {
				console.log(type);
				mui.alert('服务器连接超时，请稍后再试')
			}

		})
	</script>

</html>